<template>
  <div class="indexContainer">
    <!-- header -->
    <van-sticky>
    <div class="header">
    <div class="image"><img src="../../../public/images/logo.png" alt=""></div>
    <div class="vantsearch" @click="gosearch"><van-search
    shape="round"
  placeholder="请输入搜索关键词"
  input-align="center"
/>
</div>
      
   <button @click="gologin">登录</button>
    
    
</div>
<!-- shopNav -->


  <div class="shopNav"><div  v-show="secne == 0" class="secne0">
    <van-tabs  sticky class="tantabs"  v-model="curC1Id"
      @click="navClickHandle">
  
  <van-tab 
  :title="item.name"
        
        :name="item.id"
  v-for="(item,index) in categoryL1List1"  :key="index">
    <!-- 内容 {{ index }} -->
  </van-tab>
</van-tabs>

<div>
<van-icon size="20px" name="arrow-down" class="my-icon" @click="handler"/>
</div>
</div>
<div  v-show="secne == 1" class="sence1">
  
  <van-icon size="20px" name="arrow-up" class="my-icons" @click="handler2" />
  <span>全部频道</span>
  <div class="shoptab">
    <ul>
      
      <li  @click="navClickHandle(item.id, item.name)" v-for="(item, index) in categoryL1List1" :key="index"
                        ><span>{{ item.name }}</span></li>
     
    </ul>
    
  </div>
  <div class="mask"></div>
</div>
  
</div>
</van-sticky>

<!-- banner -->
<div class="banner">
<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
  <van-swipe-item v-for="(img,index) in tagList" :key="index"><img :src="img.appListPicUrl"/></van-swipe-item>
</van-swipe>
</div>

<!-- <van-overlay :show="show" @click="show = false" class="memngban"/> -->
  <!-- 菜单 -->
  <div class="menu">
    <div class="poliyDescList">
		<div class="poliyDescItem" v-for="(item,index) in policyDescList" :key="index">
      <img :src="item.icon" alt="">
			<span>{{item.desc}}</span>
		</div>
	</div>
      
  </div>
  <div>
    
  <div class="mainmenu" v-for="(item,index) in kingkongList" :key="index">
       <div class="mainmenuItem">
          <img :src="item.picUrl" alt="">
            <span>{{item.text}}</span>
       </div>
    </div>
    
    </div>
    <!-- 广告 -->
    <div class="advertisement">
            <div class="advertisement1">
                <a href=""><img
                        src="https://yanxuan.nosdn.127.net/static-union/16540075964ea3a7.gif?imageView&quality=75"
                        alt=""></a>
            </div>
            <div class="advertisement2">
                <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" vertical>
                    <van-swipe-item v-for="(image, index) in tagList" :key="index"><img :src="image.appListPicUrl"/>
                    </van-swipe-item>
                </van-swipe>
            </div>
        </div>
    <!-- 新人专享 -->
    <div class="newer">
     <div><span>- 新人专享礼 -</span></div>
     <div class="Giftbag"><p>新人专享礼包</p><img src="//yanxuan.nosdn.127.net/static-union/1648017994dd2933.png" alt=""></div>
     <div class="group">
       <div class="welfare">
         <p>福利社</p>
          <span>今日特价</span>
        <img  src="//yanxuan-item.nosdn.127.net/2dc408826a3dd1aa68bb34c88c84448d.png" alt="">
       </div>
        <div class="Post">
          <p>新人拼团</p>
          <span>1元起包邮</span>
          <img src="//yanxuan-item.nosdn.127.net/5098710702d820f8e39947846e94dff4.png" alt="">
        </div> 
     </div>
     
    </div>
    <!-- 灰色隔断 -->
   <div class="back"></div>
   <!-- 热销榜 -->
   <div class="Hotsale">
     <p>类目热销榜</p>
     <div class="food">
       <span>{{categoryHotSellModule.categoryList&&categoryHotSellModule.categoryList[0].categoryName}}</span>
       <div class="bor"></div>
       <img :src="categoryHotSellModule.categoryList&&categoryHotSellModule.categoryList[0].picUrl" alt="">
     </div>
     <div class="homtown">
       <span >{{categoryHotSellModule.categoryList&&categoryHotSellModule.categoryList[1].categoryName}}</span>
       <div class="bor"></div>
       <img :src="categoryHotSellModule.categoryList&&categoryHotSellModule.categoryList[1].picUrl" alt="">
     </div>
    <ul>
      <li>
        <div>{{categoryHotSellModule.categoryList&&categoryHotSellModule.categoryList[2].categoryName}}</div>
       <img :src="categoryHotSellModule.categoryList&&categoryHotSellModule.categoryList[2].picUrl" alt="">
      </li>
      <li>
        <div>{{categoryHotSellModule.categoryList&&categoryHotSellModule.categoryList[3].categoryName}}</div>
       <img :src="categoryHotSellModule.categoryList&&categoryHotSellModule.categoryList[3].picUrl" alt="">
      </li>
      <li>
        <div>{{categoryHotSellModule.categoryList&&categoryHotSellModule.categoryList[4].categoryName}}</div>
       <img :src="categoryHotSellModule.categoryList&&categoryHotSellModule.categoryList[4].picUrl" alt="">
      </li>
      <li>
        <div>{{categoryHotSellModule.categoryList&&categoryHotSellModule.categoryList[5].categoryName}}</div>
       <img :src="categoryHotSellModule.categoryList&&categoryHotSellModule.categoryList[5].picUrl" alt="">
      </li>
      <li>
        <div>{{categoryHotSellModule.categoryList&&categoryHotSellModule.categoryList[6].categoryName}}</div>
       <img :src="categoryHotSellModule.categoryList&&categoryHotSellModule.categoryList[6].picUrl" alt="">
      </li>
      <li>
       <div>{{categoryHotSellModule.categoryList&&categoryHotSellModule.categoryList[7].categoryName}}</div>
       <img :src="categoryHotSellModule.categoryList&&categoryHotSellModule.categoryList[7].picUrl" alt="">
      </li>
      <li>
        <div>{{categoryHotSellModule.categoryList&&categoryHotSellModule.categoryList[8].categoryName}}</div>
       <img :src="categoryHotSellModule.categoryList&&categoryHotSellModule.categoryList[8].picUrl" alt="">
      </li>
    </ul>
   </div>
    <div class="back2"></div>
     <!-- 爆款与众筹 -->
  <div class="Hotmoney">
    <p>明星爆款</p>
    <span>{{sceneLightShoppingGuideModule[0]&&sceneLightShoppingGuideModule[0].styleItem.desc}}</span>
    <img src="//yanxuan-item.nosdn.127.net/74662d24f6d217b520178c5a6d031457.png?quality=75&type=webp&imageView&thumbnail=150x150" alt="">
    <img src="//yanxuan-item.nosdn.127.net/a517938254c7d2f480827debf355127a.png?quality=75&type=webp&imageView&thumbnail=150x150" alt="">
  </div>
  <div class="Crowdfunding">
    <p>严选众筹</p>
    <span>{{sceneLightShoppingGuideModule[1]&&sceneLightShoppingGuideModule[1].styleItem.desc}}</span>
    <img src="//yanxuan-item.nosdn.127.net/d398ebb1be7fd30f1e3c2a41b30c4ba9.png?quality=75&type=webp&imageView&thumbnail=150x150" alt="">
    <img src="//yanxuan-item.nosdn.127.net/e9f01fb9a3d9e18f7a42dd9231390beb.png?quality=75&type=webp&imageView&thumbnail=150x150" alt="">
  </div>
  <!-- 版权 -->
  <div class="back3"></div>
  <div class="copy">
    <button class="but">下载APP</button>
    <button class="but2">电脑版</button>

    <span>&nbsp; 网易公司版权所有 @1997-2022<br/>视频经营许可证：JY133018011719</span>


  </div>
  <div class="block"></div>
    <Tabbar></Tabbar>
  </div>
  
 
</template>

<script>
import { mapGetters } from 'vuex';
import Tabbar from '@/components/tabbar/index.vue';
export default {
    name: "Home",
    data() {
        return {
            secne: 0,
            show: false,
            curC1Id:''
        };
    },
    computed:{
...mapGetters([
    "detailInfo",
    "kingkongList",
    "tagList",
    "policyDescList",
    "indexActivityModule",
    "categoryHotSellModule",
    "sceneLightShoppingGuideModule",
    "categoryL1List1"
  ]),
    },
  
    mounted() {
        this.getRecommed();
    },
    methods: {
      navClickHandle(name, title) {
      this.curC1Id = name;
      if (title == "为你推荐") {
        this.$router.push({
          path: "/home",
        });
        return;
      }
      this.handler2();
      this.$router.push({
        path: "/item/list",
        query: {
          categoryId: this.curC1Id,
        },
      });
    },
        handler() {
            this.secne = 1,
                this.show = true;
        },
        handler2() {
            this.secne = 0,
                this.show = false;
        },
        //获取详情页展示数据
        getRecommed() {
            this.$store.dispatch("getRecommed");
        },
        gologin() {
            this.$router.push({
                path: "register"
            });
        },
        gosearch(){
          this.$router.push({
                path: "search"
            });
        }
    },
    components: { Tabbar }
};
</script>

<style lang="less" scoped>
.indexContainer{
  // display: flex;
  
  .header{
    width: 100%;
    height: 50px;
    background: white;
  .image{
    float: left;
     img{
    width: 60px;
    height: 25px;
    margin-left: 20px;
    margin-top: 15px;
  }
  }
 
    .vantsearch{
      width: 330px;
      height: 30px;
      .searchipt{
    height: 30px;
    width: 330px;
    margin-top: 10px;
    }
    
  
  }
  button{
    float: right;
    width: 40px;
    height: 20px;
    font-size: 5px;
    color:red;
    background:white;
    border:1px solid red;
    border-radius: 5px;
    position: relative;
    bottom: 12px;
    right: 10px;
  }
  }
  
  .shopNav{
    
    .my-icon{
      // z-index: 1;
      // position: relative;
    position: absolute;
    left: 345px;
    top: 62px;
    z-index: 3;
      background:white;
    }
    .sence1{
      background: #fff;
        .mask{
          height: 100%;
          width: 100%;
    position: fixed;
    z-index: 1;
    background: rgba(0,0,0,.5);
  }
         .my-icons{
      // z-index: 1;
      position: relative;
      left: 345px;
      bottom: 2px;
      background:white;
      transition: 0.5s;
    }
    span{
     
      font-size: 10px;
      position: relative;
      bottom: 10px;
    }
    .shoptab{
      position: absolute;
      z-index: 2;
       background: white;
       width: 414px;
      ul{
       
        li{
          width: 60px;
          height: 20px;
          border: 1px solid ;
          float: left;
          margin: 8px 15px;
          background: #ededed;
          font-size: 10px;
          display: flex;
          span{
            line-height: 40px;
            margin-left: 9px; 
            .active {
                    border: 1px solid red;
                    color: red;
                }
          }
          p{
            margin-top: 3px;
            margin-left: 19px;
          }
          
        }
       
      }
    }
  
    }
   
  
  }
  .banner{
    
     .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
    height: 110px;
  }
  }
  .menu{
    .poliyDescList{
      	display: flex;
		.poliyDescItem{
      	flex: 1;
			text-align: center;
			img{
        width: 20px;
				height:20px;
				border-radius: 50%;
				vertical-align: middle;
      }
				
			span{
        	font-size: 10px;
				vertical-align: middle;
      }
			
    }
		
    }
    
  }
  
  .mainmenu{
   
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 20%;
      height: 110px;
      float: left;
      height: 80px;
      background: white;
      .mainmenuItem{
        
        img{
          width: 50px;
          height: 50px;
        }
        span{
          font-size: 10px;
          display: block;
        }
      }
    }
    
    .advertisement {
        width: 375px;
        background: #eee;


        .advertisement1 {
            width: 375px;

            a {
                width: 375px;

                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }

        .advertisement2 {
           width: 90px;
                height: 150px;
            float: left;
            position: absolute;
            top: 391px;
            margin:4px 0px 0 35px;
            .my-swipe {
                width: 90px;
                height: 95px;
                img {
                    border-radius: 6px;
                    width: 100%;
                    height: 100%;    
                }
            }
        }
    }
    .newer{
      span{
        font-size: 13px;
        margin-left: 142px;
      }
      .Giftbag{
        height: 200px;
        width: 177px;
        background: #fce8cc;
        float: left;
        margin-left:10px ;
        p{
          font-size: 13px;
          margin-left:20px;
        }
        img{
          width: 100px;
          height: 100px;
          margin-left: 38px;
          margin-top: 15px;
        }
      }
      .group{
        height: 200px;
        width: 177px;
        float: right;
        margin-right:10px ;
        .welfare{
          height: 100px;
          background: #ffe0d1;
            p{
              font-size: 13px;
              line-height: 42px;
               margin-left:20px;
               margin-bottom: 0px;
               margin-top: 0px;
            }
            span{
              font-size: 8px;
              display: block;
              margin-left: 18px;
              color: #c7b3aa;
            }
            img{
              width: 60px;
              height: 60px;
              float: right;
              position: relative;
               bottom: 20px;
               right: 20px;
            }
        }
        .Post{
          margin-top: 2px;
         height: 98px;
         background: #ffebbc;
          p{
              font-size: 13px;
              line-height: 42px;
               margin-left:20px;
               margin-bottom: 0px;
               margin-top: 0px;
            }
            span{
              font-size: 8px;
              display: block;
              width: 55px;
              padding-left: 2px;
              color: #fbf2e2;
              margin-left: 18px;
              background:#ceb68e;
            }
            img{
              width: 60px;
              height: 60px;
              float: right;
              position: relative;
              bottom: 20px;
               right: 20px;
            }
        }
      }
    }
    .back{
      width: 100%;
      height:10px;
      background: #eeeeee;
      margin-top: 220px;
    }
    .Hotsale{
      p{
        font-size: 13px;
       margin-left: 10px;
      }
      .food{
        width: 177px;
        height: 100px;
        background: #faf3e1;
        margin-left: 10px;
        float: left;
        span{
          font-size: 13px;
          line-height: 90px;
          margin-left: 10px;
        }
        img{
          width: 80px;
          height: 60px;
          position: relative;
         bottom: 60px;
         left: 85px;
        }
        .bor{
          width: 26px;
          border: 1px solid black;
          position: relative;
          bottom: 30px;
          left: 10px;
        }

      }
      .homtown{
         width: 177px;
        height: 100px;
        background: #eaf0f7;
        margin-right: 10px;
        float: right;
        span{
          font-size: 13px;
          line-height: 90px;
          margin-left: 10px;
        }
        img{
          width: 80px;
          height: 60px;
           position: relative;
         bottom: 60px;
         left: 85px;
        }
        .bor{
          width: 26px;
          border: 1px solid black;
          position: relative;
          bottom: 30px;
          left: 10px;
        }
      }
      ul{
        margin-left: 10px;
        li{
          width: 87px;
          height: 80px;
          background: #f5f5f5;
          float: left;
          margin-top: 10px;
          margin-right: 2px;
          div{
            font-size: 10px;
            margin-left: 15px;
             margin-top: 5px;
          }
          img{
            width: 40px;
            height: 40px;
            margin-top: 10px;
            margin-left: 20px;
          }
        }
      }
    }
     .back2{
      width: 100%;
      height:10px;
      background: #eeeeee;
      margin-top: 315px;
    }
    .Hotmoney{
      width: 177px;
      height: 140px;
      background: #f5f5f5;
      margin-left: 10px;
      margin-top: 12px;
      float: left;
      p{
        font-size: 13px;
        margin-left: 20px;
        margin-bottom: 5px;
      }
      span{
        font-size: 8px;
        display: block;
        margin-left: 19px;
        color: #e3c5f3;
      }
      img{
        width: 70px;
        height: 60px;
        position: relative;
        left: 20px;
        top: 20px;
      }
    }
    .Crowdfunding{
       width: 177px;
      height: 140px;
      background: #f5f5f5;
      margin-right: 10px;
      margin-top: 12px;
      float: right;
         p{
        font-size: 13px;
        margin-left: 20px;
        margin-bottom: 5px;
      }
      span{
        font-size: 8px;
        display: block;
        margin-left: 19px;
        color: #e58648;
      }
      img{
        width: 70px;
        height: 60px;
        position: relative;
        left: 20px;
        top: 20px;
      }
    }
    .back3{
      width: 100%;
      height:10px;
      background: #eeeeee;
      margin-top: 170px;
    }
    .copy{
      width: 100%;
      height: 100px;
      background: #282828;
      button{
          width: 80px;
          height: 30px;
          border: 1px solid #9b9b9b;
          font-size: 10px;
           background: #282828;
           color: #eeeeee;
           border-radius: 5px;
      }
      .but{
        margin: 20px ;
        margin-left: 100px;
        margin-bottom: 10px;
      }
      span{
        font-size: 10px;
        color: #9b9b9b;
        display: block;
        margin-left: 100px;
        margin-bottom: 40px;
      }
    }
    .block{
      height: 50px;
    }
}
</style>